<template>
  <div class="ant-col ant-col-24" style="padding:0 30px;">
    <div class="ant-row ant-row-space-between ant-row-middle"
         style="border-bottom: 1px solid rgb(240, 240, 240); height: 60px; padding-bottom: 10px; row-gap: 0px;"
    >
      <div class="ant-col ant-col-24" style="display: flex;justify-content: space-between;align-items: center">
        <div class="article-status">
          <div @click="handleChangeTab(index)" v-for="(item,index) in messageList"
               :class="[tabIndex==index?'is-active':'']">{{ item.label }}
          </div>
        </div>
        <div v-if="tabIndex==0 && pages > pageNo">
          <a href="javascript:void(0);" @click="handleUpdateMarkAll">一键已读</a>
        </div>
      </div>
    </div>
    <div class="ant-row" style="row-gap: 0px;" type="flex">
      <div class="ant-col ant-col-24 articles" style="">
        <div class="ant-row ant-row-start ant-row-middle" style="margin-bottom: 20px; row-gap: 0px;" type="flex">
          <div
              style="display:flex;justify-content:space-between;width:100%;margin-bottom: 10px;border-bottom: 1px solid #eee;padding-bottom: 10px;"
              v-for="(item,index) in records" :key="item.id">
            <div style="width:70%;">
              <nuxt-link :to="item.url" :title="item.title">
                <div style="height:30px;"><h4><span>{{ item.title }}</span>
                </h4></div>
                <div class="descx">{{ item.msg }}</div>
              </nuxt-link></div>
            <div style="display:flex;align-items:center;cursor:pointer;">
              <div class="options">
                <nuxt-link :to="item.url" v-if="item.url!='javascript:void(0);'">
                  <n-button size="small">
                    <n-icon>
                      <EyeOutline></EyeOutline>
                    </n-icon>
                    <span class="px-1">预览</span>
                  </n-button>
                </nuxt-link>
                <nuxt-link v-if="tabIndex==0" @click="handleUpdateMark(item.id,index)">
                  <n-button size="small" :type="item.mark==1?'success':''">
                    <n-icon>
                      <ColorWandOutline></ColorWandOutline>
                    </n-icon>
                    <span class="px-1">{{ item.mark == 1 ? '已读' : '未读' }}</span>
                  </n-button>
                </nuxt-link>
                <nuxt-link v-if="tabIndex==0" @click="handleDelMeMessage(item.id,index)">
                  <n-button size="small" type="error">
                    <n-icon>
                      <close></close>
                    </n-icon>
                    <span class="px-1">删除</span>
                  </n-button>
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
        <div class="py-[60px]" v-if="total==0" style="background: #f0f0f0">
          <k-empty :show="total==0"></k-empty>
        </div>
        <div style="padding-top:30px;padding-bottom:10px;text-align: center">
          <a href="javascript:void(0);" @click="handleLoadPage" v-if="pages > pageNo">点击加载更多（{{total}}）</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const tabIndex = ref(0)
// 充值用户充值记录
const records = ref([])
const total = ref(-1)
const pageNo = ref(1)
const pageSize = ref(10)
const stype = ref(10)
const pages = ref(1)
const route = useRoute()
const messageList = ref([])

// 选项卡切换
const handleChangeTab = (index) => {
  if(tabIndex.value == index)return
  tabIndex.value = index
  records.value = []
  pages.value = 0
  total.value = 0
  pageNo.value = 1
  pageSize.value = 10
  if (index == 0) {
    handleLoadMeMessageList()
  } else {
    stype.value = index
    handleLoadSystemMessageList()
    useSaveUpdatePointMessageApi(index)
  }
}

// 统计消息
const handleCountMessageList = async () => {
  const resp = await useCountMessageAllApi()
  var cmessageList = resp.data.map(c => {
    var person = {}
    person.label = c.label + (c.mnum > 0 ? "(" + c.mnum + ")" : '')
    person.key = c.ckey
    return person
  })
  messageList.value = cmessageList
}

// 加载系统消息
const handleLoadSystemMessageList = async () => {
  const resp = await useLoadSystemMessageApi({pageNo: pageNo.value, pageSize: pageSize.value, stype: stype.value})
  total.value = resp.data.total
  records.value = records.value.concat(resp.data.records)
  pages.value = resp.data.pages
}

// 加载我的消息
const handleLoadMeMessageList = async () => {
  const resp = await useLoadMeMessageApi({pageNo: pageNo.value, pageSize: pageSize.value, mtype: 0})
  total.value = resp.data.total
  records.value = records.value.concat(resp.data.records)
  pages.value = resp.data.pages
}


const handleLoadPage = () => {
  if (pages.value == pageNo.value) {
    return
  }
  pageNo.value++
  if (tabIndex.value == 0) {
    handleLoadMeMessageList()
  } else {
    handleLoadSystemMessageList()
  }
}

// 删除我的消息
const handleDelMeMessage = (id,index) => {
  useDialog().warning({
    content: "你确定要删除此消息吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: async () => {
      await useDelMessageMarkApi(id)
      records.value.splice(index,1)
      if(records.value.length == 0){
        pageNo.value = 1
        records.value = []
        handleLoadMeMessageList()
      }
    },
  });
}

// 一键已读
const handleUpdateMarkAll = async () => {
  await useUpdateMessageMarkAllApi()
  pageNo.value = 1
  records.value = []
  handleLoadMeMessageList()
}

// 已读
const handleUpdateMark = async (id,index) => {
  if(records.value[index].mark==1)return;
  await useUpdateMessageMarkApi(id)
  records.value[index].mark = 1
}

onMounted(() => {
  handleCountMessageList()
  // 根据参数跳转到指定的我的消息的位置
  if (route.query.tab == "me") {
    tabIndex.value = 0
    handleLoadMeMessageList()
  } else if (route.query.tab == "system") {
    tabIndex.value = 1
    stype.value = 1 // 系统消息---平台消息
    handleLoadSystemMessageList()
    useSaveUpdatePointMessageApi(1)
  } else if (route.query.tab == "course") {
    tabIndex.value = 2
    stype.value = 2 // 系统消息---平台消息课程消息
    handleLoadSystemMessageList()
    useSaveUpdatePointMessageApi(2)
  }else{
    tabIndex.value = 0
    handleLoadMeMessageList()
  }
})

</script>

<style scoped>
.creator-article {
  background: var(--bg-color);
  min-height: 70vh
}

.article-status, .article-status div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.article-status div {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: .125rem solid transparent;
  color: var(--f-color-8);
  cursor: pointer;
  font-size:14px;
  height: 3.625rem;
  margin-right: 1.6625rem
}

.article-status .is-active {
  border-bottom: .125rem solid var(--el-color-primary);
  font-weight: 700;
  color:var(--el-color-primary);
}

.article-status span {
  margin-left: .3125rem
}

.articles {
  background: var(--bg-color);
  padding: 1.25rem 0;
  width: 100%
}

.articles .desc {
  color: var(--f-color-6);
  font-size: 14px;
  line-height: 1.375rem;
  margin-top: .3rem
}

.articles .desc span {
  margin-right: .625rem
}

.options .n-button {
  margin-left: 10px
}
</style>